<template>
  <div>
    <div class="amis-scope amis-routes-wrapper">
      <div class="antd-Page">
        <div class="antd-Page-content">
          <div class="antd-Page-main">
            <div class="antd-Page-header"><h2 class="antd-Page-title"><span class="antd-TplField"><span>养殖环境监测</span></span>
            </h2></div>
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex;justify-content: center">
      <a-card style="width: 100%;" class="st-content">
        <div slot="title">
          <div class="title">羊舍空气质量</div>
        </div>
        <div class="box">
          <a-row :gutter="16">
            <template v-for="(item,index) in environmentData">
            <a-col class="gutter-row" :span="4" :key="index" v-if="item.name=='气温'">
              <div class="gutter-box">
                <img src="../../../assets/img/icon-wd.png" >
                <div class="box-item1">{{item.name}}（{{item.unit}}）</div>
                <div class="box-item2">{{item.value}}</div>
              </div>
            </a-col>
            <a-col class="gutter-row" :span="4" :key="index" v-if="item.name=='湿度'">
              <div class="gutter-box">
                <img src="../../../assets/img/iocn-sd.png">
                <div class="box-item1">{{item.name}}（{{item.unit}}）</div>
                <div class="box-item2">{{item.value}}</div>
              </div>
            </a-col>
            <a-col class="gutter-row" :span="4" :key="index" v-if="item.name=='光照'">
              <div class="gutter-box">
                <img src="../../../assets/img/icon-gz.png">
                <div class="box-item1">{{item.name}}（{{item.unit}}）</div>
                <div class="box-item2">{{item.value}}</div>
              </div>
            </a-col>
            <a-col class="gutter-row" :span="4" :key="index" v-if="item.name=='CO2'">
              <div class="gutter-box">
                <img src="../../../assets/img/icon-fc.png">
                <div class="box-item1">{{item.name}}（{{item.unit}}）</div>
                <div class="box-item2">{{item.value}}</div>
              </div>
            </a-col>
            <a-col class="gutter-row" :span="4" :key="index" v-if="item.name=='NH3'">
              <div class="gutter-box">
                <img src="../../../assets/img/icon-aq.png">
                <div class="box-item1">{{item.name}}（{{item.unit}}）</div>
                <div class="box-item2">{{item.value}}</div>
              </div>
            </a-col>
            <a-col class="gutter-row" :span="4" :key="index" v-if="item.name=='H2S'">
              <div class="gutter-box">
                <img src="../../../assets/img/icon-lhq.png">
                <div class="box-item1">{{item.name}}（{{item.unit}}）</div>
                <div class="box-item2">{{item.value}}</div>
              </div>
            </a-col>
            </template>
          </a-row>
        </div>
      </a-card>
    </div>
    <div style="display: flex;justify-content: center">
      <a-card style="width: 100%;margin-top: 24px" class="amis-scope st-content">
        <div slot="title">
          <div class="title">羊舍监控画面</div>
        </div>
        <div class="box2">
          <a-row :gutter="24">
            <a-col class="gutter-row" :span="12" v-for="(item,index) in videoList" :key="index">
<!--               <e-z-u-i-kit-js :access-token="token" :url="item.url"></e-z-u-i-kit-js>-->
              <div  style="position: relative;background-color: #132638;">
                 <div class="play-btn" @click="playHandle(item)"></div>
                <img :src="item.picUrl" style="width: 100%;height: 434px">
              </div>
            </a-col>
          </a-row>
        </div>
      </a-card>
      <a-modal :visible="visible" :footer="null" :maskClosable="false" :bodyStyle="{padding:0, height: '700px'}" width="1200px" destroyOnClose>
        <div slot="closeIcon"  @click="visible=false">
           <img src="~@/assets/img/iocn-close.png" style="width: 40px;height: 40px">
        </div>
        <e-z-u-i-kit-js :width="1200" :height="700" :access-token="token" :url="obj.url"></e-z-u-i-kit-js>
      </a-modal>
    </div>
  </div>
</template>

<script>
import EZUIKitJs from "../../../components/video/EZUIKitJs";
import {environmentMonitoringService} from "../../../services";
export default {
  name: "EnvironmentMonitoring",
  components: {EZUIKitJs},
  data () {
    return {
      visible: false,
      tenantCode: '',
      subjectInfoId: '',
      houseInfoId: '',
      token: '',
      environmentData: [],
      videoList: [],
      obj: {}
    }
  },
  created() {
    let {tenantCode, subjectInfoId, houseInfoId} = this.$route.query
    this.tenantCode = tenantCode
    this.subjectInfoId = subjectInfoId
    this.houseInfoId = houseInfoId
    this.getYsyToken()
    this.getData()
    this.getVideoList()
  },
  methods:{
    async getYsyToken (){
       await  new Promise((resolve, reject)=>{
         environmentMonitoringService.getToken({
           tenantCode: this.tenantCode,
           subjectInfoId: this.subjectInfoId
         }).then(res=>{
           this.token = res.data.data
           resolve(res)
         }).catch(error=>{
           reject(error)
         })
       })
    },
    getData () {
      environmentMonitoringService.queryEnvironmentDetail({
        tenantCode: this.tenantCode,
        subjectInfoId: this.subjectInfoId,
        houseInfoId: this.houseInfoId,
      }).then(res=>{
        this.environmentData = res.data.data.rows
      })
    },
    getVideoList () {
      environmentMonitoringService.queryList({
        tenantCode: this.tenantCode,
        subjectInfoId: this.subjectInfoId,
        houseInfoId: this.houseInfoId,
      }).then(res=>{
         let data = res.data.data.rows
        data.forEach(item=>{
          item['url'] = `ezopen://open.ys7.com/${item.deviceSerial}/${item.channelNo}.live`
        })
         this.videoList = data
      })
    },
    playHandle (item) {
      this.obj = item
      this.visible = true
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  height: 166px;
  background: rgba(87, 156, 39, 0.15);
  border-radius: 4px;
}
.gutter-box {
  text-align: center;
  padding: 30px 0;
  img {
    width: 36px;
    height: 36px;
  }
  .box-item1 {
    height: 22px;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    line-height: 22px;
    margin-top: 10px;
  }
  .box-item2 {
    margin-top: 10px;
    height: 28px;
    font-size: 36px;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #579C27;
    line-height: 28px;
  }
}
.play-btn {
  width: 80px;
  height: 80px;
  background-size: 100% 100%;
  background-image: url("~@/assets/img/icon-play.png");
  z-index: 1;
  position: absolute;
  top: 177px;
  left: 45%;
  cursor:pointer;
}
</style>
